body{
    /* background-color: #EFEFEF; */
    /* background-image: url(../img/background/dynamic-style.png); */
    /* background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; */

}


/*  页面头部部分  */
/* logo */
.logo{
    width: 4em;
    height: 4em;
    /* margin: 0.3em !important; */
    margin-right: 1em !important;
    padding: 0.1em !important;
}



.aplayer.aplayer-fixed .aplayer-lrc {
    text-shadow: none;
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    color: #1abc9c;
}


#fillBackground{
    /*width: 100%;*/
    /*height:70px !important;*/
    /*!*background: dimgrey;*!*/
    /*background-color: lightgrey;*/
}


/* 因为semanticUI存在自己的css,而且我们优先级还没它高,那么使用!important提高优先级
				1em 默认等于浏览器字体大小16px
 */
.navdiv{
    position: absolute !important;
    top: 0em !important;
    margin-top: 0em !important;
    padding:0em !important;
    opacity: 0.6;
    z-index: 100;
    width: 100%;
    display: block !important;
}

.navDiv-active{
    /* position: fixed  是相对于窗体而言的，也即相对于整个窗体布局 */
    position: fixed !important;
    top: 0em !important;
    margin-top: 0em !important;
    padding:0em !important;
    opacity: 0.8;
    z-index: 100;
    width: 100%;
    display: block !important;
}

#navMenu .mobileButton{
    position: absolute;
    top: 1em;
    right: 0em;
}

/* .menu 父容器的第一个子元素 */
#navMenu .ui.menu:first-child {
    margin-top: 0;
    margin-bottom: 0 ;
}

.mobileShow{
    display: none !important;
}

.mobileButton i{
    margin: 0em !important;
}

/* 手机端显示的title */
#navMenu .mobileTitle{
    position: absolute;
    top: 0.6em;
    left: 43%;
    font-size: 2em;
    font-weight: bolder;
    color: #00B5AD;
}

#indexNavMenu a{
    display: inline-block;
    opacity: 1;
    width: 110px !important;
    padding: 12px;
    margin-right: 15px;
}


/* 移动端大小时隐藏部分导航项 */

@media screen and (max-width: 991px){
    .searchItemHidden{
        display: none !important;
    }
}

@media screen and (max-width:767px) {
    .mobileHidden{
        display: none !important;
    }
    .mobileShow{
        display: block !important;
    }
    #indexNavMenu{
        display: none !important;
    }
    #music-icon{
        display: none !important;
    }
    #music-iframe{
        display: none !important;
    }
    .pageHeadContainer,.articleHeadContainer{
        height: 220px !important;
    }
    .pageHeadContainer .backgroundImg,.articleHeadContainer .backgroundImg{
        height: 220px !important;
    }
    .pageHeadContainer .backgroundLayout .myInfoDiv .name{
        display: none;
    }
    .pageHeadContainer .backgroundLayout .myInfoDiv .word{
        padding: 0em 0.8em;
    }
}


.pageHeadContainer{
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    /*margin-top: 84px !important;*/

}
.pageHeadContainer .backgroundImg{
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.pageHeadContainer .backgroundLayout{
    position: absolute;
    top: 0;
    width: 100%;
    width: 100%;
}
.pageHeadContainer .backgroundLayout .myInfoDiv{
    color: #fff;
    max-width: 630px;
    margin: 8em auto 1em;
}

.pageHeadContainer .backgroundLayout .myInfoDiv .name{
    font-weight: bolder;
    font-size: 2.5em;
}

.pageHeadContainer .backgroundLayout .myInfoDiv .word{
    margin-top: 1em;
    font-size: 1.2em;
}



/*  首页*/
.headContainer{
    /* 主要用来绝对定位 */
    position: relative;
    /* left: 0em;
    top: 0em; */
    /* 固定首部容器大小  */
    width: 100%;
    height: 720px;
    /* 内部元素超出固定大小则隐藏 */
    overflow: hidden;
}

.headContainer .backgroundImg{
    /* 固定图片长宽 一旦固定，屏幕大小发生变化时，背景图片不会成比例缩放  */
    width: 100%;
    height: 710px;
    /* 对图片进行剪切，保留原始比例： 这样图片会成比例缩放,但是部分内容仍然肯被裁剪 */
    object-fit: cover;
}

/* 相对布局只是在当前位置 进行移动，文档并不会删除该节点/对象 ，
	此时图片已经沾满了相对布局的位置，后来元素，就不会显示了
	因此使用绝对布局，定位到容器内部
 */
.headContainer .backgroundLayout{
    position: absolute;
    top: 0em;
    width: 100%;
    height: 100%;
}
/* infoDiv 居中对齐 */
.headContainer .backgroundLayout .myInfoDiv{
    max-width: 630px;
    margin: 12em auto 3em ;
}

.headContainer .nav a{
    opacity: 0.6;
}


.myInfoDiv .word span{
    display: block;
    font-size: 1.5em;
    font-style: italic;
    color: #C9BA9B;
    margin: 1.6em 0em;
}

.myInfoDiv .myLink{
    margin-bottom: 2em;
}

.myInfoDiv .nav{
    margin-top: 5em;
}

.myInfoDiv .nav a{
    margin-top: 0.8em;
}

.myInfoDiv .guidance{
    margin-top: 6em !important;
}

.guidance{
    opacity: 0.9;
}

.guidance i{
    margin: 0em !important;
    color: white;
}

.guidance i:hover{
    color: #0e8c8c;
}

.guidance i.icon:before{
    background: 0 0!important;
    font-size: 2em;
}

.aplayer-hide{
    display: none;
}

/* 首页推荐 */
.recommendation{
    max-width: 1000px !important;
    margin: 2em auto 1em;
}

.recommendation .recommendPic{
    /* margin-left: 100px; */
}

.recommendation p{
    font-style: italic;
    font-size: 1.2em;
}

.recommendation .titleDiv{
    margin-top: 1em !important;
}

.recommendation .title{
    margin-left: 0.8em;
}

.recommendation .title .icon{
    margin-right: 0.1em !important;
}

.recommendation .title:hover{
    color: #E66A6A;
}


.recommendation .hotArticles .articleBrief{
    color: whitesmoke;
}


.recommendation .hotArticles .hotArticle .content{
    background: rgba(0,0,0,0) !important;
}

.recommendation .hotArticles .hotArticle .header{
    font-size: 1.5em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.recommendation .hotArticles .hotArticle .description{
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*font-size: 1.2em !important;*/
    /*font-weight: 500;*/
}

.recommendation .hotArticles .hotArticle .description{
    padding-top: 5px;
}

.recommendation .hotArticles .hotArticle .content .meta{
    padding-top: 5px;
    font-size: 13px;
}

.recommendation .hotArticles .hotArticle .content .hot-article-author{
    display: inline-block;
    height: 28px;
    line-height: 28px;
}

.recommendation .hotArticles .hotArticle .content .meta .noWrap {
    white-space: nowrap;
}


.recommendation .articleBrief .hotArticleTitle{
    font-size: 1.3em !important;
    overflow: hidden !important;
    max-height: 1.1em !important;
    color: #5DCAC1 !important;
}

.recommendation .articleBrief .hotArticleContent{
    margin-top: 0.5em !important;
    max-height: 3.7em !important;
    line-height: 1.3em !important;
    overflow: hidden !important;
}

.recommendation .articleBrief .hotArticleAuthor{
    display: inline-block !important;
    float: right !important;
    margin: 0.5em !important;
    padding-right: 0.3em !important;
}

.recommendation .newVideos .video .card .content .meta{
    margin-top: 0.2em;
}
.recommendation .newVideos .video .card .extra.content{
    text-align: center;
}

.recommendation .comments .comment .card .content .description{
    height: 4em;
    overflow: hidden;
}

.recommendation .comments .comment .card .content .comment-user {
    display: inline-block;
    height: 28px;
    line-height: 28px;
}


/* 作者推荐文章 */
.recommendation .recommendTitleDiv {
    text-align: center !important;
    justify-content: center !important;
}

.recommendation .recommendTitleDiv .recommendArticlesTitle {
    color: #00232C;
    font-size: 1.2em;
    font-weight: bold;
}


.recommendArticles .recommendArticle .card {
    position: relative;
    /* 弹性盒子 */
    /* display: flex;      */
    justify-content: center;
    align-items: center;
}

.recommendArticle .articleInfo {
    position: absolute;
    bottom: -2em;
    height: 60px;
    width: 270px;
    background-color: #fff;
    /* x坐标，y坐标，模糊程度，什么颜色 */
    box-shadow: 0px 2px 5px darkgrey;
}

.recommendArticle .articleInfo {
    text-align: center;
    color: #999999;
}

.recommendArticle .articleInfo .articleTitle {
    margin-top: 5px;
    padding: 0em 5px;
    color: #000000;
    /* 超出内容...代替 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.recommendArticle .articleInfo .description {
    margin-top: 5px;

    /* 超出内容...代替 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.recommendArticle .articleInfo .description .tipSpan {
    display: inline-block !important;
    margin-right: 3px !important;
}


/* 作者推荐视频  */

.recommendTitleDiv .recommendVideosTitle {
    margin-top: 1em;
    color: #00232C;
    font-size: 1.2em;
    font-weight: bold;
}

.recommendVideos .video .playTag {
    color: #fff;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #fff;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    line-height: 50px;
    padding-left: 8px;
    /* padding-bottom: 8px; */
}

.column.videos .two.column.row{

}

.recommendVideos .video .card {
    position: relative;
}

.recommendVideos .video .card span {
    position: absolute;
    color: #fff;
}

.recommendVideos .video .card span.viewNumber {
    top: 2px;
    right: 7px;
}

.recommendVideos .video .card span.author {
    bottom: 5px;
    left: 8px;
}

.recommendVideos .video .card span.videoName {
    bottom: 12px;
    right: 8px;
}





/* 置顶图标   */
#toTop{
    position: fixed;
    right: 4em;
    bottom: 8em;
    background-color: whitesmoke;
    z-index: 10000;
    /* border-radius: 100px; */
    margin: 0em;
}

.toTop-active{
    display: inline-block !important;
}

.iframe-active{
    display: inline-block !important;
}

#toTop i{
    margin: 0em;
    padding-top: 0.2em;
    color: teal;
    font-size: 1.5em;
}


#music-icon{
    position: fixed;
    right: 3.3em;
    bottom: 4em;
    z-index: 10000;
    /* border-radius: 100px; */
    margin: 0em;
    font-size: 1.2em;
}

/* 音乐frame */
#music-iframe{
    position: fixed;
    left: 0em;
    bottom: 0em;
    /*background-color: whitesmoke;*/
    z-index: 9999;
    /* border-radius: 100px; */
    margin: 0em;
}


.newArticles{
    max-width: 1000px !important;
    margin: 2em auto 6em;
    padding: 0em 1em !important;
}

.newArticles .titleName{
    width: 200px;
    height: 50px;
}

.newArticles  .article{
    /* border: solid #DEDEDF 2px !important; */
    /* border-radius: 0.4em !important; */
    /* padding: 0.6em 0.4em !important; */
    margin: 1em 0em !important;
}



.newArticles .article .content{
    padding: 0.4em 0.4em 0.4em 0.6em !important;
    position: relative;
}
.newArticles .article .articleHeader{
    position: absolute;
    left: 0.3em;
    top: 0.5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 22px;
    font-size: 1.5em;
}

.newArticles .article .articleHeader a{
    color: #000000;
}

.newArticles .article .articleHeader a:hover{
    color: #00B5AD;
}

.newArticles .article .overView{
    height: 5em !important;
    /* font-size: 1.2em !important; */
    color: #E0E1E2;
    text-overflow: ellipsis;
    padding-top: 5px;
    overflow: hidden;

}

.newArticles .article .overView a{
    display: block !important;
    width: 100%;
    height: 100%;
    color: #4c4f52 !important;
    font-size: 15px;
}

.newArticles .article .overView a:hover{
    /*color: #299999 !important;*/
}

.newArticles .article .description{
    padding-top: 10px;
}

.newArticles .article .description span{
    margin-right: 0.5em;
    color: #999999;
}

.newArticles .article .description .tags a{
    margin: 0em !important;
    padding: 0.3em !important;
}

/* 内部元素垂直居中 */
.newArticles .article .imageDiv{
    /* display: inline-block !important;
    vertical-align: middle !important; */
    /* line-height 不能居中图片 */
    /* line-height: 200px !important; */
}

.newArticles .article .imageDiv .categoryImg{
    width: 180px;
    height: 150px;
    border-radius: 8px;
}

.newArticles .paginationDiv{
    margin-top: 3em;
}


/* 文章分类页 */
.categoryContent{
    max-width: 1000px !important;
    margin: 2em auto 6em;
    padding: 0em 1em !important;
}

.categoryContent  .article{
    /* border: solid #DEDEDF 2px !important; */
    /* border-radius: 0.4em !important; */
    /* padding: 0.6em 0.4em !important; */
    margin: 1em 0em !important;
}

.categoryContent .categoryTags{
    margin: 0em auto;
}

.categoryContent .categoryTags button{
    margin-top: 0.6em !important;
}

.categoryContent .categoryTags button:hover{
    color: #00827C !important;
}

.categoryContent .categoryTitle{
    margin-top: 2em !important;
    margin-bottom: 1em !important;
}

.categoryContent .article .content{
    padding: 0em 0.4em 0.4em 0.6em !important;
    position: relative;
}

.categoryContent .article .articleHeader{
    position: absolute;
    left: 0.3em;
    top: 0.1em;
    font-size: 1.5em;
    font-weight: 500;
}

.categoryContent .article .articleHeader a{
    color: #000000;
}
.categoryContent .article .articleHeader a:hover{
    color: #00B5AD;
}

.categoryContent .article .overView{

    height: 5.5em !important;
    font-size: 1.1em !important;
    color: #747474;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow:ellipsis;
}

.categoryContent .article .overView a{
    display: block !important;
    width: 100%;
    height: 100%;
    color: #4c4f52 !important;
    font-size: 15px;
}

.categoryContent .article .description{
    padding-top: 10px;
}

.categoryContent .article .description span{
    margin-right: 0.5em;
    color: #999999;
}

.categoryContent .article .description .tags a{
    margin: 0em !important;
    padding: 0.3em !important;
}

/* 内部元素垂直居中
.article .imageDiv{
	/* display: inline-block !important;
	vertical-align: middle !important; */
/* line-height 不能居中图片 */
/* line-height: 200px !important; */
/* } */

/* .imageDiv .categoryImg{
	width: 180px;
	height: 150px;
	border-radius: 8px;
} */

.paginationDiv{
    margin: 3em auto;
    max-width: 400px;
}


/* 文章页 */
.articleHeadContainer{
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.articleHeadContainer .backgroundImg{
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/*
让父容器透明，子容器不透明一般有两种方法
1. 相对定位和绝对定位的使用
2. 父容器css rgb为0。也即css加上background: rgba(0,0,0,0);
*/
.articleContent{
    position: relative;
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.articleContent .ui.raised.teal.segment{
    background: rgba(0,0,0,0) !important;
    padding: 0 !important;

}

/*.articleContent .waitLayer{*/
/*    position: absolute;*/
/*    top: 0px;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    bottom: 0px;*/
/*    !*height: 500px;*!*/
/*    !*max-width: 1000px !important;*!*/
/*    !*margin: 0em auto 0em;*!*/
/*    background: white;*/
/*}*/


@media only screen and (max-width: 767px){
    .typo.ui.container {
        width: auto!important;
        margin-left: 0em!important;
        margin-right: 1em!important;
    }
}



.articleContent .articleTitle{
    margin: 1em auto 0em!important;
    font-size: 1.5em !important;
    padding: 5px;
}

.articleContent .aticleInfo{
    margin: 0em auto;
    color: #999999;
    padding: 1em 0.5em;
}

.articleContent .aticleInfo  a.categoryName{
    color: #999999 !important;
    font-size: 1.2em;
    font-weight: bolder;
    text-decoration: underline;
    margin-right: 0.5em;
}

.articleContent .aticleInfo  a.categoryName:hover{
    color: #0e8c8c !important;
}

.articleContent .aticleInfo a.originalDesign{
    padding: 0.5em 0.7em !important;
    /*font-size: 0.5em;*/
    font-size: 0.7em;
}

.articleContent .aticleInfo span{
    margin-right: 0.5em;
}


.articleContent .article{
    padding: 1em 1em !important;
}

.articleContent .article code {
    /*元素内部空白保留，并换行*/
    white-space: pre-wrap !important;
    /*是否允许在单词内断句*/
    word-wrap: break-word !important;
    /*强调怎么样断句*/
    /*word-break: break-all !important;*/
}

.articleContent .article a{
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}


.articleContent .operation{
    margin: 1em auto !important;
}

.articleContent .payment img{
    margin: 1em auto !important;
}

.articleContent .payment span{
    display: block !important;
    margin: 0em auto !important;
    text-align: center;
}

/*  comment部分 */
.commentContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
}

.commentContent .segment{
    background: rgba(0,0,0,0) !important;
}


.commentContent .commentTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
    font-style: italic;
    font-weight: 400;
}

.commentContent .commentsDiv{
    max-width: 900px !important;
    margin: 1em 1em !important;
}

.commentContent .segment{
    padding: 1em 1em !important;
}

.commentContent .commentNumber{
    display: block !important;
    margin-top: 1em !important;
}

.commentContent .commentNumberRow{
    padding-bottom: 0em !important;
}

.commentContent .divider{
    margin: 0.8em 0em !important;
}

.commentContent .comment{
    width: 100%;
    /* min-height: 70px;
    /* max-height: 200px; */
    margin: 0.5em 0em;
    /* overflow: hidden; */
}

.commentContent .comment img{
    width: 60px;
    height: 60px;
    float: left;
}

.commentContent .comment .content{
    overflow: hidden;
    min-height: 70px;
    max-height: 270px;
    padding-left: 1.2em;
}

.commentContent .comment .content .userName{
    font-size: 1.2em;
    color: #00B5AD;
}

.commentContent .comment .content .commentTime{
    float: right;
    color: #999999;
}

.commentContent .comment .content .contentDetails{
    max-height: 200px;
    padding: 0.5em 0em;
    overflow: hidden;
}

.commentContent .comment .content .actions a{
    color: darkgray;
    margin-right: 0.5em;
}

.commentContent .comment .content .actions a:hover{
    color: red;
}

.commentContent .comment .content .replay{
    /* color: #909090; */
}


.end{
    margin: 1em auto !important;
    color: #999999;
}

/* music页 */
.musicContent{
    max-width: 800px !important;
    margin: 5em auto 1em;
    padding: 1em 0em !important;
    background: rgba(0,0,0,0) !important;
}

.musicContent .segment.musicBackground{
    background: rgba(0,0,0,0) !important;
}


.musicContent .musicTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
}

/* .musicContent{
	margin: 5em auto !important;
	max-width: 800px;
} */
.musicContent .musicBackground{
    height: 40em !important;
}
.musicContent .musicTitle{
    margin: 0.5em auto !important;
    text-align: center;
    color: #00B5AD;
}

.musicContent .aplayer{
    overflow: visible !important;
}


.musicContent .aplayer-lrc{
    position: absolute !important;
    top: 9em !important;
    left: 20% !important;
    height: 22em !important;
    text-align: center !important;
}

.musicContent .aplayer .aplayer-lrc p{
    /* font-size: 12px !important;			 */
    font-size: 0.9em !important;
    margin: 0.5em 0em !important;
    color: #000000;
}

.musicContent .aplayer-list{
    position: relative !important;
    z-index: 100 !important;
    background-color: #F0F0F0;
}

.musicContent .aplayer .aplayer-lrc .aplayer-lrc-currents{
    /* 过渡属性,过渡时间，过渡效果，过渡延迟 */
    /* transition: all 0.6s ease-out !important; */
}

.musicContent .aplayer .aplayer-lrc .aplayer-lrc-current{
    color: #00B5AD !important;
    font-size: 17px !important;
}

/* video页 */


.videoContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.videoContent .raised.teal.segment{
    background: rgba(0,0,0,0);
}



.videoContent .videoTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
    font-style: italic;
    font-weight: 400;
}


/* videoPlay页 */

.videoPlayContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.videoPlayContent .raised.teal.segment{
    background: rgba(0,0,0,0);
}



.videoPlayContent .videoHeader{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
    font-style: italic;
    font-weight: 400;
}

.videoPlayContent .videoRow{
    margin: 1em 0em !important;
}

.videoContent .videoRow{
    margin: 2em 0em !important;
}

.videoContent .video{
    padding-bottom: 20px;
}

.video .videoHeader{
    color: #373737;
    margin: 0.2em 0em;
}

.video .videoAuthor{
    color: #676767;
    font-size: 0.9em;
}


/*  commentWall页 */

.commentWallContent{
    max-width: 1000px !important;
    margin: 2em auto 1em;
    padding: 1em 1em !important;
}

.commentWallContent .commentTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
    font-style: italic;
    font-weight: 400;
}

.commentWallContent .commentsDiv{
    max-width: 900px !important;
    margin: 1em 1em !important;
}

.commentWallContent .segment{
    padding: 1em 1em !important;
}

.commentWallContent .commentNumber{
    display: block !important;
    margin-top: 1em !important;
}

.commentWallContent .commentNumberRow{
    padding-bottom: 0em !important;
}

.commentWallContent .divider{
    margin: 0.8em 0em !important;
}

.comment{
    width: 100%;
    /* min-height: 70px; */
    /* max-height: 200px; */
    margin: 1em 0em;
    /* overflow: hidden; */
}

.comment img{
    width: 60px;
    height: 60px;
    float: left;
}

.comment .content{
    overflow: hidden;
    min-height: 70px;
    max-height: 270px;
    padding-left: 1.2em;
}

.comment .content .userName{
    font-size: 1.2em;
    color: #00B5AD;
}

.comment .content .commentTime{
    float: right;
    color: #999999;
}

.comment .content .contentDetails{
    max-height: 200px;
    padding: 0.5em 0em;
    overflow: hidden;
}


.comment .content .replay{
    color: #909090;
}


/* 表单 */
.row.formRow{
    margin-top: 1em !important;
}

.row .ui.form .tips{
    font-weight: bolder;
    margin-bottom: 0.5em;
}

.row .ui.form .inline.fields{
    /* text-align: center !important; */
    /* margin: 0em auto 1em !important; */
}
.row .inline.fields .field{
    display: block !important;
}

/*.row .inline.fields label{*/
/*    margin-right: 4px !important;*/
/*}*/

.fields .necessary{
    color: red !important;
}


.row .form{
    width: 100% !important;
}


/* 关于我 */
.aboutMeHeadContainer{
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.aboutMeHeadContainer .backgroundImg{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.aboutMeContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.aboutMeContent .raised.teal.segment{
    background: rgba(0,0,0,0);
    padding: 0em 0em !important;

}

.aboutMeContent .typo.ui{
    width:100% !important;
}

.aboutMeContent .aboutMeTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
}

.aboutMeContent .aboutMeInfo{
    margin: 0em auto;
    color: #999999;
    padding: 1em 0.5em;
}

.aboutMeContent .introduction .item{
    margin: 0.8em 0em;
}

.aboutMeContent .introduction{
    margin: 1em;
}

.aboutMeContent .introduction .aboutMe,.blog,.logUpdate,.futurePlan{
    width: 100%;
}

.item .span.header{
    font-size: 1.6em;
    font-weight: 600;
    color: #00B5AD;
}

.item .itemHeader{
    font-size: 1.2em;
    font-weight: 600;
}

.item .spanContent{
    color: #555555;
    line-height: 1.4em;
    font-size: 1.1em;
}

.item .itemContent{
    color: #555555;
    /* font-size: em; */
    padding-top: 0.5em;
}

.itemContent p{
    font-size: 1.1em;
    font-weight: 500 !important;
}

.blog,.futurePlan,.logUpdate{
    margin-top: 2em !important;
}


/* 项目介绍 */
.projectContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.projectContent .raised.teal.segment{
    background: rgba(0,0,0,0);
    padding: 0em 0em !important;

}

.projectContent .projectTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
}


/* friendLink */
.friendLinkContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
    background: rgba(0,0,0,0);
}

.friendLinkContent .raised.teal.segment{
    background: rgba(0,0,0,0);
}


.friendLinkContent .linkTitle{
    margin: 1em auto  0em!important;
    font-size: 2em !important;
    font-style: italic;
    font-weight: 400;
}

.friendLinkContent .linkRow{
    margin: 2em 0em !important;
}

.friendLinkContent .link{

}

.link .linkHeader{
    color: #373737;
    margin: 0.2em 0em;
}

.link .linkAuthor{
    color: #676767;
    font-size: 0.9em;
}

.linkFormContent{
    max-width: 1000px !important;
    margin: 1em auto 1em;
    padding: 1em 1em !important;
}

.linkFormContent .segment{
    background: rgba(0,0,0,0) !important;
}

.linkFormContent .linkHeader{
    display: block !important;
    color: #00B5AD;
    font-weight: bolder;
    font-size: 1.5em;
    padding: 1em 0em;
}

.linkFormContent .linkDemoRow{
    /* padding-bottom: 1em !important; */
}

.linkFormContent .linkDemo{
    display: block; !important;
}

.linkDemo .demoTitle{
    font-size: 1.1em;
    font-weight: bold;
}

.linkDemo .demoContent div{
    line-height: 1.5em;
}

.linkDemo .demoContent label{
    font-weight: 600;
    margin-right: 0.5em;
}

.linkDemo .demoContent span{
    color: dimgrey;
}


/* 标签页*/
.tagContent{
    max-width: 800px !important;
    margin: 6em auto 0em;
    padding: 1em 0em 0em 0em !important;
    background: rgba(0,0,0,0) !important;
}

.tagContent .segment.tagBackground{
    background: rgba(0,0,0,0) !important;
    padding: 0em !important;

}

.tagContent .tagTitle{
    margin: 1em auto 0em !important;
    font-size: 2em !important;
    text-align: center !important;
    color: #00B5AD;
}

#tagsList {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0px auto;
    background: rgba(0,0,0,0);
    height: 400px;
    width:800px;
    /*border:1px solid #ccc;*/
    padding:10px;
}

#tagsList a {
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: Microsoft YaHei;
    /*color: #009C95;*/
    font-weight: bold;
    text-decoration: none;
    padding: 3px 6px;
}

#tagsList a:hover {
    color: #FF0000;
    letter-spacing: 2px;
}


/* 标签颜色*/
#tagsList .tag0{
    color: #8d8687;
}
#tagsList .tag1{
    color: #0e8c8c;
}
#tagsList .tag2{
    color: #0ea432;
}
#tagsList .tag3{
    color: #00a8c6;
}
#tagsList .tag4{
    color: #8da6ce;
}
#tagsList .tag5{
    color: #00c4ff;
}
#tagsList .tag6{
    color: #9c3328;
}
#tagsList .tag7{
    color: #1abc9c;
}
#tagsList .tag8{
    color: #6C95F5;
}
#tagsList .tag9{
    color: #6a9fb5;
}
#tagsList .tag10{
    color: #7aa61a;
}



/* 搜索页 */
.searchPageContent{
    max-width: 1000px !important;
    margin: 2em auto 6em;
    padding: 0em 1em !important;
}


.searchPageContent  .article{
    /* border: solid #DEDEDF 2px !important; */
    /* border-radius: 0.4em !important; */
    /* padding: 0.6em 0.4em !important; */
    margin: 1em 0em !important;
}

.searchPageContent .categoryTags{
    margin: 0em auto;
}

.searchPageContent .categoryTags button{
    margin-top: 0.6em !important;
}

.searchPageContent .categoryTags button:hover{
    color: #00827C !important;
}

.searchPageContent .searchTitle{
    display: inline-block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: withe !important;
    color: aliceblue;
    text-align: center;
    font-size: 1.5em;
    /* background-image: linear-gradient(to right, #00fff0, #0083fe); */
    border-radius: 5px;
    background: #74ebd5;
    background: -webkit-linear-gradient(to top, #ACB6E5, #74ebd5);
    background: linear-gradient(to top, #ACB6E5, #74ebd5);

}

.searchPageContent .article .content{
    padding: 0em 0.4em 0.4em 0.6em !important;
    position: relative;
}

.searchPageContent .article .articleHeader{
    position: absolute;
    left: 0.3em;
    top: 0.1em;
    font-size: 1.5em;
    font-weight: 500;
}

.searchPageContent .article .articleHeader a{
    color: #000000;
}
.searchPageContent .article .articleHeader a:hover{
    color: #00B5AD;
}

.searchPageContent .article .overView{

    height: 5.5em !important;
    font-size: 1.1em !important;
    color: #747474;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow:ellipsis;
}

.searchPageContent .article .overView a{
    display: block !important;
    width: 100%;
    height: 100%;
    color: #4c4f52 !important;
    font-size: 15px;
}

.searchPageContent .article .description{
    padding-top: 10px;
}

.searchPageContent .article .description span{
    margin-right: 0.5em;
    color: #999999;
}

.searchPageContent .article .description .tags a{
    margin: 0em !important;
    padding: 0.3em !important;
}


.hideRow{
    display: none !important;
}
.showRow{
    display: block !important;
}


/*error 页面*/

.errorContent{
    max-width: 800px !important;
    margin: 7em auto 0em;
    padding: 1em 0em 0em 0em !important;
    background: rgba(0,0,0,0) !important;
}

.errorContent .segment.errorBackground{
    background: rgba(0,0,0,0) !important;
    padding: 0em !important;

}

.error
    /* horizontal menu */
img {
    max-width: 100%;
}

.error
.wrap {
    width: 1000px;
    margin: 0 auto;
}

.error
.main {
    text-align: center;
    color: #FFF;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 3.5em;
    margin-bottom: 1em;
}

.error
.main h3 {
    font-size: 16px;
    text-align: left;
    padding: 30px 30px;
}

.error
.main h1 {
    font-size: 60px;
    margin-top: 15px;
    color: #1CD3CB;
    text-transform: uppercase;
    font-family: 'Fenix', serif;
}

.error
.main p {
    font-size: 1em;
    margin-top: 10px;
    line-height: 1.6em;
    color: black;
}

.error
.main span.error {
    color: #48C8D3;
    font-size: 18px;
}

.error
.main p span {
    font-size: 14px;
    color: #24817A;
}

.error
.icons {
    padding-bottom: 20px;
    text-align: right;
}

.error
.icons p {
    padding-right: 140px;
    color: dimgrey;
    font-size: 1em;
    cursor: pointer;
}

.error
.icons p:hover {
    text-decoration: underline;
}

.error
.icons ul {
    padding-right: 20px;
}

.error
.icons li {
    display: inline-block;
    /*padding-top: 10px;*/
}

.error
.icons li a {
    margin: 2px;
}


/* footer */
.footerDiv{
    margin-top: 2em !important;
    opacity: 0.8;
    /*z-index: 10;*/
    margin-bottom: 0em !important;
}
.footerDivide{
    margin-top: 3em !important;
}
.footerDiv #webDate,#webName,#accessNumber,#articleNumber,#viewNumber,#videoNumber,#tagCloud{
    display: inline-block;
    font-size: 1.2em;
    color: #DD5246;
}


/*  pagination  */
.pagination ul{
    /* 将对象作为弹性伸缩盒显示  简称flex容器 */
    display: flex;
    /*background: #fff;*/
    /* 去掉ul前面的小点 */
    list-style-type: none;
    /* padding-left: 0 !important; */
    border-radius: 50px;
    padding: 5px 8px;
    /*border: 1px solid #20B2AA;*/
    /*text-align: center !important;*/
    /*margin: 0 auto !important;*/
    /*水平居中  flex布局 */
    justify-content: center;
}

.pagination ul li{
    list-style: none;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 10px;
    transition: all 0.3s ease;
    color: darkgrey;
}

.pagination ul li.numb{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 0 3px;
    border: 1px solid #10A3A3;

}

.pagination ul li.dots{
    font-size: 22px;
    cursor: default;
}

.pagination ul li.btn{
    /* background: #20b2aa; */
    padding: 0 10px;
}

.pagination ul li.prev{
    border-radius: 25px 5px 5px 25px;
}

.pagination ul li.next{
    border-radius: 5px 25px 25px 5px;
}

.pagination ul li.active,
.pagination ul li.numb:hover,
.pagination ul li.btn:hover{
    color: #fff;
    background: #20B2AA;
}

